<template>
  <!-- 商品详情页面 -->
  <div class="detail">
    <!-- 商品基础信息 -->
    <div class="detail-info-box">
      <!--轮播 -->
      <div class="swiper">
        <el-carousel indicator-position="outside" height="500px">
          <el-carousel-item v-for="item in productdata.image" :key="item">
            <img :src="item" style="width: 100%; height: 100%" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 描述 -->
      <div class="info">
        <!-- 商品标题 -->
        <div class="product-name">
          {{ productdata.name }}
        </div>
        <!-- 商品参数 -->
        <div class="prodicu-desc">{{ productdata.desc }}</div>
        <!-- 商品价格 -->
        <div class="product-price">￥{{ productdata.price }}元</div>
        <!-- 配送地址 -->
        <div class="product-adress" style="text-align: left; padding: 20px">
          <p>配送地址：</p>
          <p>{{address}}</p>
          
        </div>
        <!-- 商品规格 -->
        <div class="product-specs">
          <div class="product-specs-title">商品规格:</div>
          <div>
            <el-row>
              <el-button v-for="item in productdata.specs" :key="item">
                {{ item }}
              </el-button>
            </el-row>
          </div>
        </div>
        <!-- 总计金额 -->
        <div class="total-price">总计：{{ productdata.price }}元</div>
        <!-- 提交按钮 -->
        <div>
          <el-row>
            <el-button
              type="warning"
              v-loading.fullscreen.lock="fullscreenLoading"
              @click="toOrder"
              >立即购买</el-button
            >
            <el-button type="danger" @click="toShopCart">加入购物车</el-button>
          </el-row>
        </div>
      </div>
    </div>
    <div class="title">商品详情</div>
    <!-- 商品详情 -->
    <div class="detail-content">
      <div class="detail-content-box">
        <img
          v-for="item in productdata.descimg"
          :key="item"
          :src="item"
          style="width: 100vw"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "@vue/reactivity";
import { useRoute, useRouter } from "vue-router";
import { onMounted } from "vue";
import { getDtail } from "@/utils/product";
import { useStore } from "vuex";
export default {
  created() {
    document.body.scrollTop = 0;
  },
  setup() {
    const address = ref("暂无地址")
    const router = useRouter();
    const rote = useRoute();
    const store = useStore();
    //接收传来的id
    const id = ref("");
    id.value = rote.params.id;
    //测试商品图片的数据
    let productdata = reactive({
      id: 0,
      name: "",
      desc: "",
      price: 0,
      specs: [],
      image: [],
      descimg: [],
    });
    const fullscreenLoading = ref(false);
    //跳转购物车
    const toShopCart = () => {
      router.push("/cart");
      const data = {
        id: productdata.id,
        value: 1,
        isCheck: false,
        img: productdata.image[0],
        title: productdata.name,
        unitPrice: productdata.price,
        price: productdata.price,
      };
      store.commit("addCart", data);
    };
    //跳转结算
    const toOrder = () => {
      const data = {
        id: productdata.id,
        value: 1,
        isCheck: false,
        img: productdata.image[0],
        title: productdata.name,
        unitPrice: productdata.price,
        price: productdata.price,
      };
      store.commit("add", data);
      fullscreenLoading.value = true;
      setTimeout(() => {
        fullscreenLoading.value = false;
        router.push("/order");
      }, 500);
    };
    onMounted(() => {
      //获取商品信息
      getDtail(id.value).then((res) => {
        productdata.id = res.data.data.scdid;
        productdata.name = res.data.data.scdname;
        productdata.desc = res.data.data.scddescribe;
        productdata.price = res.data.data.scdprice;
        productdata.specs = res.data.data.specs;
        productdata.image = res.data.data.imagetableList;
        productdata.descimg = res.data.data.desing;
      });
      //获取地址
     address.value =  JSON.parse(localStorage.getItem("address"))[0].address
    });
    return {
      address,
      fullscreenLoading,
      toOrder,
      toShopCart,
      id,
      productdata,
    };
  },
};
</script>

<style scoped>
.detail-info-box {
  width: 1280px;
  margin: 0 auto;
  display: flex;
}

.detail-info-box div {
  width: 100%;
}

.swiper {
  padding: 30px;
  height: 560px;
}

.info {
  padding: 30px;
}

.product-name {
  height: 40px;
  line-height: 36px;
  padding: 2px;
  text-align: left;
  font-size: 20px;
}

.prodicu-desc {
  text-align: left;
  padding: 2px;
  margin-top: 10px;
  color: #b0b0b0;
  font-size: 14px;
}

.product-price {
  margin-top: 15px;
  color: #ff6700;
  text-align: left;
  padding: 2px;
  font-size: 20px;
}

.product-adress {
  margin-top: 20px;
  height: 104px;
  background: #fafafa;
  text-align: center;
  line-height: 52px;
}

.product-specs {
  margin-top: 20px;
}

.product-specs-title {
  text-align: left;
  padding: 2px;
  margin-bottom: 10px;
  font-size: 17px;
}

.el-button {
  width: 150px;
  height: 40px;
}

.total-price {
  margin-top: 20px;
  color: #ff6700;
  text-align: left;
  font-size: 23px;
  margin-bottom: 20px;
}

.title {
  color: #ff6700;
  height: 80px;
  border-top: 1px solid #b0b0b0;
  line-height: 80px;
}

.detail-conten {
  background: #f5f5f5;
}

.detail-conten-box {
  width: 1280px;
  margin: 0 auto;
}
</style>
